<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP服务器测试页面</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            min-height: 100vh;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        h1 {
            color: #4a5568;
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }
        .ai-notice {
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            color: white;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 30px;
            font-weight: bold;
            font-size: 1.1em;
            box-shadow: 0 4px 15px rgba(255,107,107,0.3);
        }
        .server-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .server-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            border-left: 5px solid #667eea;
            transition: transform 0.3s ease;
        }
        .server-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }
        .server-card h3 {
            margin-top: 0;
            color: #667eea;
            font-size: 1.3em;
        }
        .features {
            background: #e8f4fd;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
        }
        .features h2 {
            color: #2d3748;
            margin-bottom: 15px;
        }
        .features ul {
            list-style-type: none;
            padding: 0;
        }
        .features li {
            padding: 8px 0;
            border-bottom: 1px solid #cbd5e0;
        }
        .features li:before {
            content: "✓";
            color: #48bb78;
            font-weight: bold;
            margin-right: 10px;
        }
        .http-info {
            background: #fff5f5;
            padding: 20px;
            border-radius: 10px;
            border-left: 5px solid #f56565;
        }
        .http-info h2 {
            color: #c53030;
            margin-bottom: 15px;
        }
        .code-example {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            margin: 10px 0;
            overflow-x: auto;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 2px solid #e2e8f0;
            color: #718096;
        }
        .timestamp {
            font-size: 0.9em;
            color: #a0aec0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 HTTP服务器测试页面</h1>
        
        <div class="ai-notice">
            ⚠️ 本页面及所有HTTP服务器代码均为纯AI生成，仅供学习HTTP协议底层原理使用
        </div>

        <div class="disclaimer">
            <h2>🚨 重要免责声明</h2>
            <div class="warning-box">
                <p><strong>⚠️ 本项目仅供学习使用，严禁用于生产环境！</strong></p>
                <ul>
                    <li>❌ 代码存在大量Bug和安全漏洞，未经充分测试验证</li>
                    <li>❌ 禁止用于任何商业项目或实际生产环境</li>
                    <li>❌ 禁止用于处理敏感数据或公网服务</li>
                    <li>✅ 仅可用于本地学习和HTTP协议原理研究</li>
                </ul>
                <p><strong>使用本代码的任何风险和后果由使用者自行承担！</strong></p>
            </div>
            <div class="license-info">
                <p><strong>📄 开源协议：</strong> MIT License</p>
                <p><strong>🤖 代码生成：</strong> 完全由AI生成，仅供教育目的</p>
            </div>
        </div>

        <div class="server-info">
            <div class="server-card">
                <h3>🔥 Java版本</h3>
                <p>使用ServerSocket和多线程实现，展示面向对象的网络编程方式</p>
                <div class="code-snippet">
                    <code>javac HttpServerJava.java && java HttpServerJava</code>
                </div>
            </div>
            
            <div class="server-card">
                <h3>⚡ C++版本</h3>
                <p>直接使用系统Socket API，跨平台实现，展示底层网络编程</p>
                <div class="code-snippet">
                    <code>g++ -std=c++17 -pthread HttpServerCpp.cpp -o server</code>
                </div>
            </div>
            
            <div class="server-card">
                <h3>💎 C#版本</h3>
                <p>使用.NET Framework网络类库，强类型系统和企业级开发特性</p>
                <div class="code-snippet">
                    <code>csc HttpServerCSharp.cs && HttpServerCSharp.exe</code>
                </div>
            </div>
            
            <div class="server-card">
                <h3>🎯 Kotlin版本</h3>
                <p>现代JVM语言，简洁语法，空安全特性，与Java完全互操作</p>
                <div class="code-snippet">
                    <code>kotlinc HttpServerKotlin.kt -include-runtime -d server.jar</code>
                </div>
            </div>
            
            <div class="server-card">
                <h3>🦀 Rust版本</h3>
                <p>内存安全的系统编程语言，现代化的错误处理和并发机制</p>
                <div class="code-snippet">
                    <code>cargo run</code>
                </div>
            </div>
            
            <div class="server-card">
                <h3>🐍 Python版本</h3>
                <p>简洁易读的语法，丰富的标准库，快速原型开发</p>
                <div class="code-snippet">
                    <code>python http_server_python.py</code>
                </div>
            </div>
            
            <div class="server-card">
                <h3>🚀 Go版本</h3>
                <p>内置并发支持，简洁语法，优秀的网络编程能力</p>
                <div class="code-snippet">
                    <code>go run http_server_go.go</code>
                </div>
            </div>
            
            <div class="server-card">
                <h3>🟢 Node.js版本</h3>
                <p>事件驱动、非阻塞I/O，JavaScript运行时，单线程事件循环</p>
                <div class="code-snippet">
                    <code>node http_server_nodejs.js</code>
                </div>
            </div>
            
            <div class="server-card">
                <h3>🐘 PHP版本</h3>
                <p>Web开发专用语言，动态类型，广泛的Web应用支持</p>
                <div class="code-snippet">
                    <code>php http_server_php.php</code>
                </div>
            </div>
            
            <div class="server-card">
                <h3>💎 Ruby版本</h3>
                <p>面向对象编程，优雅的语法，强大的元编程能力</p>
                <div class="code-snippet">
                    <code>ruby http_server_ruby.rb</code>
                </div>
            </div>
        </div>

        <div class="features">
            <h2>🔧 实现的HTTP功能</h2>
            <ul>
                <li>HTTP/1.1协议解析</li>
                <li>GET请求处理</li>
                <li>静态文件服务</li>
                <li>MIME类型识别</li>
                <li>错误状态码响应（404, 405, 500等）</li>
                <li>多线程并发处理</li>
                <li>请求头解析</li>
                <li>响应头生成</li>
            </ul>
        </div>

        <div class="http-info">
            <h2>📚 HTTP协议学习要点</h2>
            <p><strong>HTTP请求格式:</strong></p>
            <div class="code-example">
GET /index.html HTTP/1.1
Host: localhost:8080
User-Agent: Mozilla/5.0
Accept: text/html

[请求体]
            </div>
            
            <p><strong>HTTP响应格式:</strong></p>
            <div class="code-example">
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 1234
Connection: close

[响应体]
            </div>
            
            <p><strong>常见状态码:</strong></p>
            <ul>
                <li><strong>200 OK:</strong> 请求成功</li>
                <li><strong>404 Not Found:</strong> 资源不存在</li>
                <li><strong>405 Method Not Allowed:</strong> 方法不被允许</li>
                <li><strong>500 Internal Server Error:</strong> 服务器内部错误</li>
            </ul>
        </div>

        <div class="footer">
            <p>🤖 此HTTP服务器实现展示了从Socket到HTTP协议的完整过程</p>
            <p class="timestamp">生成时间: <span id="timestamp"></span></p>
        </div>
    </div>

    <script>
        // 显示当前时间
        document.getElementById('timestamp').textContent = new Date().toLocaleString('zh-CN');
        
        // 添加一些交互效果
        document.querySelectorAll('.server-card').forEach(card => {
            card.addEventListener('click', function() {
                this.style.background = this.style.background === 'rgb(230, 244, 255)' ? '#f8f9fa' : '#e6f4ff';
            });
        });
    </script>
</body>
</html>